<template>
  <el-dialog
    v-model="dialogShow"
    title="处理消息"
    width="30%"
    center
    :close-on-click-modal="false"
    draggable
  >
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="留言状态" prop="state" :label-width="formLabelWidth">
        <el-select v-model="form.state" placeholder="选择留言状态">
          <el-option label="未处理" value="0" />
          <el-option label="已处理" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input
          v-model="form.msg"
          placeholder="留言备注"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
        <el-button @click="handleClose"> 取 消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { dealMsg } from "@/Api/pc";
import { showMessage } from "@/utils";
const formRef = ref();
const formLabelWidth = 150;
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
  state: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:show", "updateList"]);
const rules = {
  state: [
    {
      required: true,
      message: "请选择留言状态",
      trigger: "blur",
    },
  ],
};
const dialogShow = computed({
  get: () => props.show,
  set: (val) => {
    emits("update:show", val);
  },
});

const form = reactive({
  state: "",
  msg: "",
});

const handleClose = () => {
  emits("update:show", false);
};
const handleConfirm = async () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      const response = await dealMsg({
        id: props.id,
        state: form.state,
        msg: form.msg,
      });
      const { code, msg } = response;
      if (code === 0) {
        showMessage("success", `${msg}`);
        emits("update:show", false);
        emits("updateList");
      }
    }
  });
};
watch(
  () => props.show,
  (val) => {
    if (val) {
      console.log(props.state);
      form.state = props.state;
    }
  }
);
</script>
<style lang="scss" scoped></style>
